<template>
  <div class="user-card">
    <el-card class="box-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>{{ title }}</span>
          <el-button class="button" type="primary" size="small">
            操作
          </el-button>
        </div>
      </template>
      <div class="user-info">
        <el-avatar :size="60" :src="avatar" />
        <div class="info">
          <h3>{{ name }}</h3>
          <p>{{ description }}</p>
          <el-tag :type="tagType">{{ status }}</el-tag>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title?: string
  name: string
  description?: string
  avatar?: string
  status?: string
  tagType?: 'success' | 'info' | 'warning' | 'danger'
}

withDefaults(defineProps<Props>(), {
  title: '用户信息',
  description: '这是一个用户描述',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
  status: '在线',
  tagType: 'success'
})
</script>

<style scoped>
.user-card {
  margin: 20px 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.info h3 {
  margin: 0 0 5px 0;
  color: #303133;
}

.info p {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 14px;
}

.box-card {
  width: 100%;
  max-width: 400px;
}
</style>